<template>
<div class="invite">
  <div class="detail-banner">
    <div class="banner-person">
      <p>
        <strong class="person">10人</strong>
      </p>
      <p>
        <i class="el-icon-user-solid"></i>
        <span>邀请人数</span>
      </p>
    </div>
    <div class="banner-money">
      <p>
        <span>
          <strong class="money">10,000</strong>
        </span>
        <span class="unit">USDT</span>
      </p>
      <p>
        <span class="meiyuan">$</span>
        <span>邀请奖励总额</span>
      </p>
    </div>
    <div class="banner-btn">提取奖励</div>
  </div>
  <div class="invite-mid">
    <div class="bar">我的邀请链接</div>
    <div class="invit-ipt">
      <el-input v-model="value" clearable placeholder="请输入Kis挖矿数量"></el-input>
    </div>
  </div>
  <div class="invite-foot">
    <div class="bar">邀请明细</div>
    <div class="list-box">
      <el-table v-loading="loading" :data="tableData" tooltip-effect="dark">
        <el-table-column prop="address" label="好友地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="level" label="级别" show-overflow-tooltip></el-table-column>
        <el-table-column prop="kis" label="锁仓Kis数量" show-overflow-tooltip></el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 40, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'Invite',
  data () {
    return {
      loading: false,
      value: '',
      tableData: [{
          address: 'xxxxxxxxxxxxxx',
          level: '一级好友',
          kis: '100'
        },
        {
          address: 'xxxxxxxxxxxxxx',
          level: '一级好友',
          kis: '100'
        },
        {
          address: 'xxxxxxxxxxxxxx',
          level: '一级好友',
          kis: '100'
        },
        {
          address: 'xxxxxxxxxxxxxx',
          level: '一级好友',
          kis: '100'
        },
        {
          address: 'xxxxxxxxxxxxxx',
          level: '一级好友',
          kis: '100'
        },
        {
          address: 'xxxxxxxxxxxxxx',
          level: '一级好友',
          kis: '100'
        },
        {
          address: 'xxxxxxxxxxxxxx',
          level: '一级好友',
          kis: '100'
        },
        {
          address: 'xxxxxxxxxxxxxx',
          level: '一级好友',
          kis: '100'
        },
        {
          address: 'xxxxxxxxxxxxxx',
          level: '一级好友',
          kis: '100'
        }
      ],
      total: 100,
      pageSize: 10,
      currentPage: 1
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {},
    handleSizeChange (val) {
      this.pageSize = val
      this.init()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.init()
    }
  }
}
</script>

<style lang="less">
.invite {
  padding: 20px 10%;
  color: #999;

  .invit-ipt {
    background: #fff;
    padding: 50px 100px;
  }

  .list-box {
    background: #fff;
    padding: 50px 100px;
  }

  .invite-mid {
    margin: 20px 0;
    border-radius: 4px;
    overflow: hidden;
  }

  .invite-foot {
    border-radius: 4px;
    overflow: hidden;
  }

  .bar {
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background-image: linear-gradient(90deg, #6339f3 0%, #9c52ff 100%), linear-gradient(#ffffff, #ffffff);
    background-blend-mode: normal, normal;
    color: #fff;
  }

  .detail-banner {
    border-radius: 4px;
    overflow: hidden;
    height: 200px;
    background: url('../../assets/images/detail-banner.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 4px solid #ff6a00;

    p {
      display: flex;
      align-items: center;
    }

    .el-icon-user-solid {
      margin-right: 2px;
    }

    .el-icon-user-solid {
      color: #6439f3;
    }

    .meiyuan {
      background: #6439f3;
      width: 14px;
      height: 14px;
      font-size: 12px;
      border-radius: 50%;
      overflow: hidden;
      text-align: center;
      line-height: 14px;
      display: inline-block;
      color: #fff;
      margin-right: 2px;
    }

    .person {
      color: #333;
    }

    .money {
      color: #f9305b;
      font-size: 20px;
    }

    .person {
      font-size: 20px;
    }

    .unit {
      font-size: 12px;
      padding-left: 3px;
    }

    .banner-btn {
      border-radius: 30px;
      overflow: hidden;
      background-image: linear-gradient(-90deg, #ff9448 0%, #ff6a00 100%), linear-gradient(#ffffff, #ffffff);
      background-blend-mode: normal, normal;
      cursor: pointer;
      text-align: center;
      height: 35px;
      line-height: 35px;
      color: #fff;
      width: 120px;
    }
  }
}
</style>
